<template>
	<div class="w-full h-full flex flex-col relative overflow-hidden">
		<betslip-header />
		<betslip-tabs />
		<div class="my-2 px-3 flex-1 h-1 overflow-auto overflow-x-hidden relative">
			<n-scrollbar>
				<betslip-follow-list
					v-if="betslipStore.tab === BetslipTab.Follow"
					:showSuceessList="showSuceessList" />
				<betslip-combo-info v-else-if="isTransition(betslipStore.combo.status)" />
				<div class="h-full flex flex-col" v-else>
					<betslip-list :showSuceessList="showSuceessList" />
					<betslip-combo />
				</div>
			</n-scrollbar>
		</div>
		<transition-group
			enter-active-class="animate__animated animate__fadeInUp"
			leave-active-class="animate__animated animate__fadeOutDown">
			<betslip-success-list v-if="showSuceessList" />
			<betslip-footer v-else-if="!isEmpty" />
		</transition-group>
		<transition
			enter-active-class="animate__animated animate__fadeIn"
			leave-active-class="animate__animated animate__fadeOut">
			<betslip-empty v-if="isEmpty" />
		</transition>
	</div>
</template>
<script lang="ts" setup>
import { NScrollbar } from 'naive-ui'
import BetslipTabs from './betslip-tabs.vue'
import BetslipHeader from './betslip-header.vue'
import BetslipList from './betslip-list.vue'
import BetslipFooter from './betslip-footer/index.vue'
import BetslipCombo from './betslip-combo/index.vue'
import BetslipComboInfo from './betslip-combo/betslip-combo-info.vue'
import BetslipEmpty from './betslip-empty.vue'
import BetslipFollowList from './betslip-follow-list.vue'
import BetslipSuccessList from './betslip-success-list/index.vue'
import { BetslipTab } from '@/types'
import { useBetslipStore, useMatchStore } from '@/store'
import { computed, watch } from 'vue'
import { isTransition } from '@/utils'

const betslipStore = useBetslipStore()
const matchStore = useMatchStore()

const isEmpty = computed(() => {
	if (betslipStore.successList.length) {
		return false
	}
	if (betslipStore.tab === BetslipTab.Single) {
		return betslipStore.list.length === 0
	} else if (betslipStore.tab === BetslipTab.Combo) {
		return betslipStore.list.length === 0
	} else {
		return betslipStore.followList.length === 0
	}
})

const showSuceessList = computed(() => {
	if (betslipStore.successList.length) {
		return true
	}
	if (betslipStore.tab === BetslipTab.Single) {
		return betslipStore.list.some(({ status }) => isTransition(status))
	} else if (betslipStore.tab === BetslipTab.Combo) {
		return isTransition(betslipStore.combo.status)
	} else {
		return betslipStore.followList.some(({ status }) => isTransition(status))
	}
})

watch(
	() => betslipStore.list.length,
	() => {
		const eventIds = betslipStore.list.map((item) => item.eventId)
		matchStore.subscribeData['betslip'] = eventIds
	}
)
</script>
